import React, { useContext } from 'react'
import { Cell, Checkbox, Button } from 'react-vant';
import Ctx from './store/Ctx';
//列表组件
export default function Listcom() {

    //函数 组件使用上下文useContex(上下文对象)
    let obj = useContext(Ctx)
    //console.log(obj);


    return (
        <div>
            {
                obj.todolist.map(item => {
                    return <Cell
                        center
                        key={item.id}
                        title={item.title}
                        icon={<Checkbox checked={item.sed} onChange={() => { 
                            obj.dispatch({
                                type:'sed_list',
                                payload:item.id
                            })
                        }} />}
                        value={<Button size='mini' type='danger' onClick={()=>{
                            obj.dispatch({
                                type:'del_list',
                                payload:item.id
                            })
                        }}>删除</Button>}
                    />
                })
            }
        </div>
    )
}
